<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 饼图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.staticfile.org/echarts/5.3.2/echarts.min.js"></script>
    <style>
        .chart-container {
            display: flex;
            gap: 20px;
        }

        .chart {
            width: 50%;
            height: 400px;
        }

        .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
        }

        .return-button {
            display: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .zhezhao{
            width: 50%;
            height: 400px;
            position: fixed;
            top: 0;
            right: 0;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="chart-container">
        <div class="chart" id="chart1"></div>
        <div class="chart chart2" id="chart2"></div>
        <div class="zhezhao"></div>
    </div>
    <div class="button-container">
        <button class="return-button" id="returnButton">返回</button>
    </div>

    <script>
        // 初始化第一个饼图
        var chart1 = echarts.init(document.getElementById('chart1'));
        var chart2 = echarts.init(document.getElementById('chart2'));

        // 第一个饼图的数据
        var chart1Data = [
            { name: '综合管理', value: Math.floor(Math.random() * 100) },
            { name: '警务技术', value: Math.floor(Math.random() * 100) },
            { name: '法官等级', value: Math.floor(Math.random() * 100) },
            { name: '检察官等级', value: Math.floor(Math.random() * 100) }
        ];

        // 第二个饼图的数据（根据第一个饼图的选中项动态生成）
        var chart2Data = {
            '综合管理': [
                { name: '一级调研员', value: Math.floor(Math.random() * 100) },
                { name: '二级调研员', value: Math.floor(Math.random() * 100) },
                { name: '三级调研员', value: Math.floor(Math.random() * 100) },
                { name: '四级调研员', value: Math.floor(Math.random() * 100) },
                { name: '一级主任科员', value: Math.floor(Math.random() * 100) },
                { name: '二级主任科员', value: Math.floor(Math.random() * 100) }

            ],
            '警务技术': [
                { name: '一级调研员', value: Math.floor(Math.random() * 100) },
                { name: '二级调研员', value: Math.floor(Math.random() * 100) },
                { name: '三级调研员', value: Math.floor(Math.random() * 100) },
                { name: '四级调研员', value: Math.floor(Math.random() * 100) },
                { name: '一级主任科员', value: Math.floor(Math.random() * 100) },
                { name: '二级主任科员', value: Math.floor(Math.random() * 100) }
            ],
            '法官等级': [
                { name: '一级调研员', value: Math.floor(Math.random() * 100) },
                { name: '二级调研员', value: Math.floor(Math.random() * 100) },
                { name: '三级调研员', value: Math.floor(Math.random() * 100) },
                { name: '四级调研员', value: Math.floor(Math.random() * 100) },
                { name: '一级主任科员', value: Math.floor(Math.random() * 100) },
                { name: '二级主任科员', value: Math.floor(Math.random() * 100) }
            ],
            '检察官等级': [
                { name: '一级调研员', value: Math.floor(Math.random() * 100) },
                { name: '二级调研员', value: Math.floor(Math.random() * 100) },
                { name: '三级调研员', value: Math.floor(Math.random() * 100) },
                { name: '四级调研员', value: Math.floor(Math.random() * 100) },
                { name: '一级主任科员', value: Math.floor(Math.random() * 100) },
                { name: '二级主任科员', value: Math.floor(Math.random() * 100) }
            ]
        };

        // 第一个饼图的配置
        var option1 = {
            title: {
                text: '职级',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '分类',
                    type: 'pie',
                    radius: '50%',
                    data: chart1Data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 第二个饼图的初始配置
        var option2 = {
            title: {
                text: '二级职级',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '详细分类',
                    type: 'pie',
                    radius: '50%',
                    data: []
                }
            ]
        };

        // 设置第一个饼图的选项
        chart1.setOption(option1);

        // 设置第二个饼图的初始选项（空数据）
        chart2.setOption(option2);

        // 监听第一个饼图的点击事件
        chart1.on('click', function (params) {
            // 获取点击的分类名称
            var selectedType = params.name;

            // 更新第二个饼图的数据
            option2.series[0].data = chart2Data[selectedType];
            option2.title.text = selectedType + ' 详细分类';


            // 隐藏第一个饼图，显示第二个饼图
            document.getElementById('chart1').style.display = 'none';
            document.getElementById('chart2').style.width = '400px';
            document.getElementById('chart2').style.height = '400px';

            chart2.setOption(option2);

            // 显示返回按钮
            document.getElementById('returnButton').style.display = 'block';
        });

        // 监听返回按钮的点击事件
        document.getElementById('returnButton').addEventListener('click', function () {
            // 显示第一个饼图，隐藏第二个饼图
            document.getElementById('chart1').style.display = 'block';
            document.getElementById('chart2').style.width = '0ox';
            document.getElementById('chart2').style.height = '0px';

            // 隐藏返回按钮
            document.getElementById('returnButton').style.display = 'none';

            // 重置第二个饼图的数据
            option2.series[0].data = [];
            option2.title.text = '二级分类';
            chart2.setOption(option2);
        });
    </script>
</body>

</html>